<template>
  <treeselect
    :normalizer="normalizer"
    v-model="menuId"
    :options="$store.state.common.menuData"
    placeholder="请选择上级菜单"
  />
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { mapActions } from 'vuex'
export default {
  props: {
    value: {
      type: String
    }
  },
  components: {
    Treeselect
  },
  computed: {
    menuId: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  mounted() {
    this.getMenuTree()
  },
  methods: {
    ...mapActions('common', ['getMenuTree']),
    normalizer(node) {
      // 去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children
      }
    }
  }
}
</script>

<style lang="stylus">
  .vue-treeselect__placeholder, .vue-treeselect__single-value
    line-height unset
  .vue-treeselect__control
    width auto
</style>
